<template>
  <div class="card">
    <ul>
      <li
        v-for="(item, index) in dataList"
        :key="index"
        :style="dataListStyle"
        v-loading="loading"
      >
        <div class="totaldata">
          <span class="totalname">{{ item.des }}</span>
          <el-tag v-if="item.title == '总'">{{ item.title }}</el-tag>
          <el-tag v-if="item.title == '周'" type="success">{{
            item.title
          }}</el-tag>
          <el-tag v-if="item.title == '月'" type="warning">{{
            item.title
          }}</el-tag>
          <el-tag v-if="item.title == '今天'" type="danger">{{
            item.title
          }}</el-tag>
        </div>
        <div class="totalbody">
          <count-to
            class="number"
            :startVal="item.startVal"
            :endVal="item.endVal"
            :duration="1500"
            separator=""
            :decimals="
              item.des == '本周销售额' || item.des == '今天销售额' ? 2 : 0
            "
          />
          <span class="number" v-if="item.des != '订单数'">{{
            item.unit
          }}</span>
          <span class="number" v-else>单</span>
        </div>
        <div class="totalbottom">
          <span class="des">{{ item.name }}</span>
          <span class="totalbottom_num"
            >{{ item.atotal }}<label>{{ item.unit2 }}</label></span
          >
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import countTo from "vue-count-to";
import { ConsoleApi } from "@/api/ConsoleApi";

export default {
  name: "ConsoleCard",
  components: {
    countTo
  },
  data() {
    return {
      sessionStore: sessionStorage.getItem("user_store"),
      startVal: 0,
      dataList: [
        {
          des: "访问量",
          icon: "",
          startVal: 0,
          duration: 100,
          endVal: 0,
          width: 24,
          height: 26,
          name: "总访问量",
          atotal: 0,
          unit: "次",
          unit2: "次",
          title: "总"
        },
        {
          des: "名片点击量",
          icon: "",
          startVal: 0,
          duration: 100,
          endVal: 0,
          width: 27,
          height: 25,
          name: "总点击量",
          atotal: 0,
          unit: "次",
          unit2: "次",
          title: "总"
        },
        {
          des: "关注量",
          icon: "",
          startVal: 0,
          duration: 100,
          endVal: 0,
          width: 24,
          height: 25,
          name: "总关注量",
          atotal: 0,
          unit: "次",
          unit2: "次",
          title: "总"
        },
        {
          des: "客户量",
          icon: "",
          startVal: 0,
          duration: 10,
          endVal: 0,
          width: 24,
          height: 24,
          name: "总客户量",
          atotal: 0,
          unit: "位",
          unit2: "位",
          title: "总"
        },
        {
          des: "订单数",
          icon: "",
          startVal: 0,
          duration: 100,
          endVal: 0,
          width: 24,
          height: 25,
          name: "订单转化率",
          atotal: 0,
          unit: "",
          unit: "",
          title: "月"
        },
        {
          des: "本周销售额",
          icon: "",
          startVal: 0,
          duration: 1000,
          endVal: 0,
          width: 27,
          height: 25,
          name: "本月销售额",
          atotal: 0,
          unit: "万元",
          unit2: "元",
          title: "月"
        }
      ],
      endVal: 2020,
      duration: 1000,
      dataListStyle: {},
      loading: true
    };
  },
  mounted() {
    this.computedItemWidth();
    this.consoleData();
  },
  methods: {
    computedItemWidth() {
      let count = this.dataList;
      let width = 100 / count;

      this.dataListStyle = {
        width: `calc(${width}% - 20px)`
      };
    },
    consoleData() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      if (guestcode == "IHFFHJ86LC") {
        this.dataList = [
          {
            des: "名片商家",
            icon: "",
            startVal: 0,
            duration: 100,
            endVal: 0,
            width: 24,
            height: 26,
            name: "总名片数",
            atotal: 0,
            unit: "个",
            unit2: "个",
            title: "总"
          },
          {
            des: "对接平台",
            icon: "",
            startVal: 0,
            duration: 100,
            endVal: 0,
            width: 27,
            height: 25,
            name: "总平台数",
            atotal: 0,
            unit: "个",
            unit2: "个",
            title: "总"
          },
          {
            des: "开通电商客户",
            icon: "",
            startVal: 0,
            duration: 10,
            endVal: 0,
            width: 24,
            height: 24,
            name: "总电商客户",
            atotal: 0,
            unit: "位",
            unit2: "位",
            title: "总"
          },
          {
            des: "访问量",
            icon: "",
            startVal: 0,
            duration: 100,
            endVal: 0,
            width: 24,
            height: 25,
            name: "名片墙总访问量",
            atotal: 0,
            unit: "次",
            unit2: "次",
            title: "总"
          },
          {
            des: "订单数",
            icon: "",
            startVal: 0,
            duration: 100,
            endVal: 0,
            width: 24,
            height: 25,
            name: "订单转化率",
            atotal: 0,
            unit: "",
            unit2: "",
            title: "今天"
          },
          {
            des: "今天销售额",
            icon: "",
            startVal: 0,
            duration: 1000,
            endVal: 0,
            width: 27,
            height: 25,
            name: "本周销售额",
            atotal: 0,
            unit: "万元",
            unit2: "元",
            title: "周"
          }
        ];
      }
      ConsoleApi({
        guestcode: guestcode,
        gscode: gscode
      }).then(res => {
        if (res.code === 0) {
          console.log(res);
          this.loading = false;
          this.dataList[0].endVal = res.data.vdata[0].total;
          this.dataList[1].endVal = res.data.cdata[0].total;
          this.dataList[2].endVal = res.data.fdata[0].total;
          this.dataList[3].endVal = res.data.udata[0].total;
          this.dataList[4].endVal = res.data.odata[0].total;
          this.dataList[5].endVal = res.data.tdata[0].total;
          this.dataList[5].endVal =
            Math.round(this.dataList[5].endVal * 10000) / 10000 / 10000;

          this.dataList[0].atotal = res.data.vdata[0].atotal;
          this.dataList[1].atotal = res.data.cdata[0].atotal;
          this.dataList[2].atotal = res.data.fdata[0].atotal;
          this.dataList[3].atotal = res.data.udata[0].atotal;
          this.dataList[4].atotal = res.data.conversionrate;
          this.dataList[5].atotal = res.data.tdata[0].atotal;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  overflow: hidden;
  background: transparent !important;

  ul {
    width: calc(100% + 15px);
    margin-left: -15px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    background: transparent !important;

    li {
      width: calc(16.666% - 15px);
      height: 150px;
      line-height: 150px;
      // text-align: center;
      margin: 0 0 0 15px;
      box-sizing: border-box;
      background: #fff;
      // display: flex;
      // justify-content: space-between;
      padding: 0 15px;
      position: relative;
      border-radius: 3px;
      // box-shadow: 0px 0px 0px 0px rgba(28,76,186,.08);
      transition: all 0.6s ease-in-out;

      &:hover {
        box-shadow: 5px 5px 5px 5px rgba(28, 76, 186, 0.12);
      }

      .svg-icon {
        width: 3em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        position: absolute;
        top: 40%;
        transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        bottom: 0;
        left: 10%;
      }

      .totaldata {
        color: #999999;
        font-size: 14px;
        border-bottom: 1px solid #eee;
        width: 100%;
        display: block;
        -ms-user-select: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        height: 40px;
        line-height: 40px;
        .totalname {
          float: left;
        }
        .el-tag {
          float: right;
          margin-top: 6px;
        }
      }
      .totaldata span {
        display: block;
      }

      .totalbody {
        width: 100%;
        display: block;
        height: 70px;
        line-height: 70px;
        .number {
          color: #515a6e;
          font-size: 35px;
          margin: 0;
          font-weight: bold;
        }
      }
      .totalbottom {
        width: 100%;
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: right;
        .des {
          color: #999999;
          font-size: 14px;
          height: 14px;
          float: left;
          user-select: none;
          -moz-user-select: none;
          -webkit-user-select: none;
        }
      }
      .totalbottom_num {
        color: #ff0000;
        font-weight: bold;
        font-size: 16px;

        label {
          color: #999999;
          font-weight: initial;
          font-size: 14px;
        }
      }
    }
  }
}

@media only screen and (max-width: $device-notebook) {
  .card {
    padding-top: 0 !important;

    ul {
      li {
        height: 150px;

        .des {
          font-size: 12px;
        }
      }
    }

    .iconfont {
      left: 15px !important;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .card {
    ul {
      width: calc(100% + 15px);
      margin-left: -15px;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;

      li {
        width: calc(33.333% - 15px);
        height: 150px;
        line-height: 150px;
        margin-bottom: 15px;
      }
    }
  }
}

@media only screen and (max-width: $device-phone) {
  .card {
    ul {
      width: calc(100% + 15px);
      margin-left: -15px;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;

      li {
        width: 100%;
        height: 150px;
        line-height: 150px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
